<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换图</title>
		<style>
		@charset "utf-8";
			/* CSS Document */
		/*重置浏览器的默认样式*/
		body,ul,li,p,h1,h2,h3,img {
			margin:0;
			padding:0;
			border:0;
			list-style:none;
		}
		/*全局控制*/
		body {
			font-family:'微软雅黑';
		}
		a:link,a:visited {
			text-decoration:none;
		}
		/*控制背景图片的样式*/
		img.bg {
			width:100%;
			height:auto !important;
			min-width:1024px;
			position:fixed;
			/*固定定位*/
		  z-index:1;
			/*设置z-index层叠等级为1;
			*/
		}
		/*整体控制天气图标的大盒子*/
		.slider {
			position:absolute;
			bottom:100px;
			width:100%;
			text-align:center;
			z-index:9999;
			/*设置z-index层叠等级为9999;
			*/
		}
		/*整体控制每个天气图标的样式*/
		.slider li {
			display:inline-block;
			/*将块元素转为行内块元素*/
		  width:170px;
			height:130px;
			margin-right:15px;
		}
		/*绘制每个天气图标的圆角矩形模块*/
		.slider a {
			width:170px;
			font-size:22px;
			color:#fff;
			display:inline-block;
			padding-top:70px;
			padding-bottom:20px;
			border:2px solid #fff;
			border-radius:5px;
			position:relative;
			/*相对定位*/
			cursor:pointer;
			/* 光标呈现为指示链接的手型指针*/
			text-shadow:-1px -1px 1px rgba(0,0,0,0.8),-2px -2px 1px rgba(0,0,0,0.3),-3px -3px 1px rgba(0,0,0,0.3);
		}
		/*控制每个天气图标圆角矩形的背景色*/
		.slider li:nth-of-type(1) a {
			background-color:#9d907f;
		}
		.slider li:nth-of-type(2) a {
			background-color:#19425e;
		}
		.slider li:nth-of-type(3) a {
			background-color:#58a180;
		}
		.slider li:nth-of-type(4) a {
			background-color:#a1c64a;
		}
		.slider li:nth-of-type(5) a {
			background-color:#ffc103;
		}
		/* 设置after伪元素选择器的样式*/
		.slider a::after {
			content:"";
			display:block;
			height:120px;
			width:120px;
			border:5px solid #fff;
			border-radius:50%;
			position:absolute;
			/*相对与绝对定位*/
		  left:50%;
			top:-80px;
			z-index:9999;
			/*设置z-index层叠等级为9999;
			*/
		  margin-left:-60px;
		}
		/* 使用after伪元素在标记之后插入内容*/
		.slider li:nth-of-type(1) a::after {
			background:url(images/sbg1.jpg) no-repeat center;
		}
		.slider li:nth-of-type(2) a::after {
			background:url(images/sbg2.jpg) no-repeat center;
		}
		.slider li:nth-of-type(3) a::after {
			background:url(images/sbg3.jpg) no-repeat center;
		}
		.slider li:nth-of-type(4) a::after {
			background:url(images/bg4.jpg) no-repeat center;
		}
		.slider li:nth-of-type(5) a::after {
			background:url(images/sbg5.jpg) no-repeat center;
		}
		/*设置before伪元素选择器的样式*/
		.slider a::before {
			content:"";
			display:block;
			height:120px;
			width:120px;
			border:5px solid #fff;
			border-radius:50%;
			position:absolute;
			/*相对与绝对定位*/
		  left:50%;
			top:-80px;
			margin-left:-60px;
			z-index:99999;
			/*设置z-index层叠等级为9999;
			*/ 
		  background:rgba(0,0,0,0.3);
		}
		.slider a:hover::before {
			opacity:0;
		}
		/*控制第一个背景图切换的动画效果*/
		@keyframes 'slideLeft' {
			0% {
			left:-500px;
		}
		100% {
			left:0;
		}
		}@-webkit-keyframes 'slideLeft' {
			0% {
			left:-500px;
		}
		100% {
			left:0;
		}
		}@-moz-keyframes 'slideLeft' {
			0% {
			left:-500px;
		}
		100% {
			left:0;
		}
		}@-o-keyframes 'slideLeft' {
			0% {
			left:-500px;
		}
		100% {
			left:0;
		}
		}@-ms-keyframes 'slideLeft' {
			0% {
			left:-500px;
		}
		100% {
			left:0;
		}
		}/*当单击链接时，为所链接到的内容指定样式*/
		.slideLeft:target {
			z-index:100;
			animation:slideLeft 1s 1;
			-webkit-animation:slideLeft 1s 1;
			-moz-animation:slideLeft 1s 1;
			-ms-animation:slideLeft 1s 1;
			-o-animation:slideLeft 1s 1;
		}
		/*控制第二个背景图切换的动画效果*/
		@keyframes 'slideBottom' {
			0% {
			top:350px;
		}
		100% {
			top:0;
		}
		}@-webkit-keyframes 'slideBottom' {
			0% {
			top:350px;
		}
		100% {
			top:0;
		}
		}@-moz-keyframes 'slideBottom' {
			0% {
			top:350px;
		}
		100% {
			top:0;
		}
		}@-ms-keyframes 'slideBottom' {
			0% {
			top:350px;
		}
		100% {
			top:0;
		}
		}@-o-keyframes 'slideBottom' {
			0% {
			top:350px;
		}
		100% {
			top:0;
		}
		}/*当单击链接时，为所链接到的内容指定样式*/
		.slideBottom:target {
			z-index:100;
			/*设置z-index层叠等级100;
			*/
			/*定义动画播放时间和次数*/
			animation:slideBottom 1s 1;
			-webkit-animation:slideBottom 1s 1;
			-moz-animation:slideBottom 1s 1;
			-ms-animation:slideBottom 1s 1;
			-o-animation:slideBottom 1s 1;
		}
		/*控制第三个背景图切换的动画效果*/
		@keyframes 'zoomIn' {
			0% {
			-webkit-transform:scale(0.1);
		}
		100% {
			-webkit-transform:none;
		}
		}@-webkit-keyframes 'zoomIn' {
			0% {
			-webkit-transform:scale(0.1);
		}
		100% {
			-webkit-transform:none;
		}
		}@-moz-keyframes 'zoomIn' {
			0% {
			-moz-transform:scale(0.1);
		}
		100% {
			-moz-transform:none;
		}
		}@-ms-keyframes 'zoomIn' {
			0% {
			-ms-transform:scale(0.1);
		}
		100% {
			-ms-transform:none;
		}
		}@-o-keyframes 'zoomIn' {
			0% {
			-o-transform:scale(0.1);
		}
		100% {
			-o-transform:none;
		}
		}/*当单击链接时，为所链接到的内容指定样式*/
		.zoomIn:target {
			z-index:100;
			/*设置z-index层叠等级为100;
			*/
			animation:zoomIn 1s 1;
			-webkit-animation:zoomIn 1s 1;
			-moz-animation:zoomIn 1s 1;
			-ms-animation:zoomIn 1s 1;
			-o-animation:zoomIn 1s 1;
		}
		/*控制第四个背景图切换的动画效果*/
		@keyframes 'zoomOut' {
			0% {
			-webkit-transform:scale(2);
		}
		100% {
			-webkit-transform:none;
		}
		}@-webkit-keyframes 'zoomOut' {
			0% {
			-webkit-transform:scale(2);
		}
		100% {
			-webkit-transform:none;
		}
		}@-moz-keyframes 'zoomOut' {
			0% {
			-moz-transform:scale(2);
		}
		100% {
			-moz-transform:none;
		}
		}@-ms-keyframes 'zoomOut' {
			0% {
			-ms-transform:scale(2);
		}
		100% {
			-ms-transform:none;
		}
		}@-o-keyframes 'zoomOut' {
			0% {
			-o-transform:scale(2);
		}
		100% {
			-o-transform:none;
		}
		}/*当单击链接时，为所链接到的内容指定样式*/
		.zoomOut:target {
			z-index:100;
			/*设置z-index层叠等级100;
			*/
			animation:zoomOut 1s 1;
			-webkit-animation:zoomOut 1s 1;
			-moz-animation:zoomOut 1s 1;
			-ms-animation:zoomOut 1s 1;
			-o-animation:zoomOut 1s 1;
		}
		/*控制第五个背景图切换的动画效果*/
		@keyframes 'rotate' {
			0% {
			-webkit-transform:rotate(-360deg) scale(0.1);
		}
		100% {
			-webkit-transform:none;
		}
		}@-webkit-keyframes 'rotate' {
			0% {
			-webkit-transform:rotate(-360deg) scale(0.1);
		}
		100% {
			-webkit-transform:none;
		}
		}@-moz-keyframes 'rotate' {
			0% {
			-moz-transform:rotate(-360deg) scale(0.1);
		}
		100% {
			-moz-transform:none;
		}
		}@-ms-keyframes 'rotate' {
			0% {
			-ms-transform:rotate(-360deg) scale(0.1);
		}
		100% {
			-ms-transform:none;
		}
		}@-o-keyframes 'rotate' {
			0% {
			-o-transform:rotate(-360deg) scale(0.1);
		}
		100% {
			-o-transform:none;
		}
		}/*当单击链接时，为所链接到的内容指定样式*/
		.rotate:target {
			z-index:100;
			/*设置z-index层叠等级为100;
			*/
			animation:rotate 1s 1;
			-webkit-animation:rotate 1s 1;
			-moz-animation:rotate 1s 1;
			-ms-animation:rotate 1s 1;
			-o-animation:rotate 1s 1;
		}
		@keyframes 'notTarget' {
			0% {
			z-index:75;
		}
		/*动画开始时的状态*/
			100% {
			z-index:75;
		}
		/*动画结束时的状态*/}@-webkit-keyframes 'notTarget' {
			0% {
			z-index:75;
		}
		100% {
			z-index:75;
		}
		}@-moz-keyframes 'notTarget' {
			0% {
			z-index:75;
		}
		100% {
			z-index:75;
		}
		}@-ms-keyframes 'notTarget' {
			0% {
			z-index:75;
		}
		100% {
			z-index:75;
		}
		}@-o-keyframes 'notTarget' {
			0% {
			z-index:75;
		}
		100% {
			z-index:75;
		}
		}/*排除target元素指定动画样式*/
		.bg:not(:target) {
			animation:notTarget 1s 1;
			-webkit-animation:notTarget 1s 1;
			-moz-animation:notTarget 1s 1;
			-ms-animation:notTarget 1s 1;
			-o-animation:notTarget 1s 1;
		}

		</style>
	</head>
	<body>
		<section>
		    <ul class="slider">
		        <li><a href="#bg1">周一狂躁综合症</a></li>
		        <li><a href="#bg2">周二雷霆似雨浇</a></li>
		        <li><a href="#bg3">周三阴郁似乌云</a></li>
		        <li><a href="#bg4">周四冬日盼春来</a></li>
		        <li><a href="#bg5">周五守得艳阳天</a></li>
		    </ul>
		    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="周一" class="bg slideLeft" id="bg1">
		    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="周二" class="bg slideBottom" id="bg2">
		    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="周三" class="bg zoomIn" id="bg3">
		    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="周四" class="bg zoomOut" id="bg4">
		    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="周五" class="bg rotate" id="bg5">
		</section>
	</body>
</html>
